<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="店铺名称">
                <el-input v-model="formInline.searchValue" placeholder="请输入店铺名称" clearable />
            </el-form-item>
            <el-form-item label="商品类型" style="width: 220px">
                <el-select v-model="formInline.type" placeholder="请选择商品类型" clearable>
                    <el-option label="鲜花" value="鲜花" />
                    <el-option label="水果" value="水果" />
                    <el-option label="甜品" value="甜品" />
                    <el-option label="生鲜" value="生鲜" />
                    <el-option label="冷饮" value="冷饮" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="showDialog('新增')">新增</el-button>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="shopName" label="店铺名称" />
            <el-table-column prop="shopTel" label="电话" />
            <el-table-column prop="shopImage" label="图片">
                <template #default="{ row }">
                    <img :src="row.shopImage" alt="" width="80">
                </template>
            </el-table-column>
            <el-table-column prop="shopAddress" label="地址" />
            <el-table-column prop="shopType" label="类型" />
            <el-table-column prop="shopScore" label="评分" />
            <el-table-column prop="shopDescription" label="描述" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button @click="showDialog('编辑', row)">编辑</el-button>
                    <el-button type="danger" @click="open(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />


        <!-- 抽屉 -->
        <el-drawer size="60%" v-model="dialog" title="I have a nested form inside!" :before-close="handleClose"
            direction="ltr" class="demo-drawer">
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input v-model="form.shopName" />
                    </el-form-item>
                    <el-form-item label="商品地址" :label-width="formLabelWidth">
                        <el-input v-model="form.shopAddress" />
                    </el-form-item>
                    <el-form-item label="商品描述" :label-width="formLabelWidth">
                        <el-input v-model="form.shopDescription" />
                    </el-form-item>
                    <el-form-item label="商品电话" :label-width="formLabelWidth">
                        <el-input v-model="form.shopTel" />
                    </el-form-item>
                    <el-form-item label="商品分数" :label-width="formLabelWidth">
                        <el-input v-model="form.shopScore" />
                    </el-form-item>
                    <el-form-item label="商品销售量" :label-width="formLabelWidth">
                        <el-input v-model="form.shopSellCount" />
                    </el-form-item>
                    <el-form-item label="商品类型 " :label-width="formLabelWidth">
                        <el-input v-model="form.shopType" />
                    </el-form-item>
                    <el-form-item label="图片" :label-width="formLabelWidth">
                        <el-input v-model="form.shopImage" />
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">Cancel</el-button>
                    <el-button type="primary" :loading="loading" @click="onClick">
                        {{ loading ? 'Submitting ...' : 'Submit' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
const stroe = useCounterStore()

const formLabelWidth = '100px'

const pageCode = ref(1)
const list = ref([])
const total = ref(0)
const dialog = ref(false)
const loading = ref(false)
const form = ref({})
const timer = ref(null)
const formInline = reactive({
    searchValue: '',
    type: '',
})

const onSubmit = () => {
    console.log('submit!')
}

// 判断新增还是编辑
const showDialog = (val, row) => {
    dialog.value = true
    if (val === '新增') {
        form.value = {}
    } else {
        form.value = { ...row }
    }
}

const open = (row) => {
    ElMessageBox.confirm(
        '你确定删除这条数据吗？',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('/api/list', { params: { id: row.id } }).then(res => {
                getData()
                stroe.delItem(row)
            })
            
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}

const handleClose = (done) => { }
const cancelForm = () => {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
}

const onClick = () => {
    // 点击编辑抽屉进行回填时，form数据是有id的，新增时没有，所以通过id进行判断是新增还是编辑
    if (form.value.id) {
        axios.post('/api/list', form.value).then(res => {
            getData()
            loading.value = true
            timer.value = setTimeout(() => {
                loading.value = false
                dialog.value = false
            }, 400)
        })

    } else {
        axios.put('/api/list', form.value).then(res => {
            getData()
            loading.value = true
            timer.value = setTimeout(() => {
                loading.value = false
                dialog.value = false
            }, 400)
        })
    }

}

const getData = () => {
    axios.get('/api/list', { params: { pageCode: pageCode.value, ...formInline } }).then(res => {
        console.log(res);
        list.value = res.data.data.data
        total.value = res.data.data.totalCount
    })
}

onMounted(() => {
    getData()
})

watch(pageCode, () => {
    getData()
})
</script>